/* 获取元素 */
const smallCups = document.querySelectorAll(".cup-small");
const liters = document.getElementById("liters");
const percentage = document.getElementById("percentage");
const remained = document.getElementById("remained");

/* 循环smallCups里所有元素 */
smallCups.forEach((cup, idx) => {
  /* 给每个元素添加上点击事件 */
  cup.addEventListener("click", () => highlightCups(idx));
});
const highlightCups = (idx) => {
  /* 是否是最后一个并且full存在于smallCups[idx]元素中 */
  if (
    idx === smallCups.length - 1 &&
    smallCups[idx].classList.contains("full")
  ) {
    idx--;
  } else if (
    smallCups[idx].classList.contains("full") &&
    !smallCups[idx].nextElementSibling.classList.contains("full")
  ) {
    idx--;
  }
  /* 循环smallCups里所有元素 */
  smallCups.forEach((cup, idx2) => {
    /* 从0开始到点击的元素下标 */
    if (idx2 <= idx) {
      /* 给元素添加上full类样式 */
      cup.classList.add("full");
    } else {
      /* 给元素移除full类样式 */
      cup.classList.remove("full");
    }
  });

  updateBigCup();
};

const updateBigCup = () => {
  /* 获取到所有有full类样式的元素的个数 */
  const fullCups = document.querySelectorAll(".cup-small.full").length;
  /* 所有杯子的个数 */
  const totalCups = smallCups.length;
  /* 没有有full类样式的元素 */
  if (fullCups === 0) {
    /*  visibility 隐藏元素而不更改文档的布局 */
    percentage.style.visibility = "hidden";
    /* 高度设为0 */
    percentage.style.height = 0;
  } else {
    /*  visibility 显示元素而不更改文档的布局 */
    percentage.style.visibility = "visible";
    /* 设置高度：有full类样式的元素个数/所有杯子的个数*330 */
    percentage.style.height = `${(fullCups / totalCups) * 330}px`;
    /* 更改percentage元素内容=有full类样式的元素个数/所有杯子的个数*100 */
    percentage.innerText = `${(fullCups / totalCups) * 100}%`;
  }
  /* 有full类样式的元素个数=== 所有杯子的个数*/
  if (fullCups === totalCups) {
    /*  visibility 隐藏元素而不更改文档的布局 */
    remained.style.visibility = "hidden";
    /* 高度设为0 */
    remained.style.height = 0;
  } else {
    /*  visibility 显示元素而不更改文档的布局 */
    remained.style.visibility = "visible";
    /* 更改percentage元素内容=2-(250*有full类样式的元素的个数)/1000 */
    liters.innerText = `${2 - (250 * fullCups) / 1000}L`;
  }
};
